<template>
    <!--导航栏部分-->
<div class="sidenav">
    <div style="height:50px"></div>
    <router-link  to="/SelfInfo"> <div class="AvatarBox">
        <img src="../assets/resource/avatar.png">
        </div>
    </router-link>
        <div class="NameBox">
        <div>Administrator</div>
        </div>
    <div style="height:50px"></div>
    <router-link to="/AddUser"><div class="NavItems">Adduser</div></router-link>
    <router-link to="/Management"><div class="NavItems">Management</div></router-link>
    <router-link to="/Role"><div class="NavItems">RoleManagement</div></router-link>
    <div class="NavItems" @click="logout()">Logout</div>
      </div>
    <!--页面主体-->
    <div class="main">
        <div class="Head">
	<div class="HeadPrompt">Management</div>
</div>
<div style="height: 50px;px;width:100% "></div>
<div class="SearchBox">
<div class="AddRoleButton" style="margin-left: 10%;"  @click="dialogFormVisible = true">AddRole</div></div>
<div class="tableBox" >
<el-table :data="currentData" style="width: 50%" height="400" border>
    <el-table-column fixed prop="name" label="角色名称" width="200" />
    <el-table-column fixed prop="id" label="ID" width="400" />
    <el-table-column fixed="right" label="Operations" width="100">
    <template #default="currentData">
        <el-button size="small" type="danger" @click="handleDelete(currentData.$index, currentData.row)">Delete</el-button>
      </template>
    </el-table-column>
 
  </el-table>
  
</div>
<div style="width:100%;display: flex;justify-content: center;">
  <el-pagination v-model:currentPage="pageindex" layout="prev, pager, next" :page-count="this.pagenum" pager-count=10 @current-change="handleCurrentChange"></el-pagination>
</div>

<el-dialog class="DialogForm" v-model="dialogFormVisible" title="新增角色" center>
    <el-form :model="addRoleMsg" center>
      <el-form-item label="Role Name" :label-width="formLabelWidth">
        <el-input v-model=addRoleMsg.RoleName autocomplete="off" />
      </el-form-item>
      <el-form-item style="margin-left: 15px;"><el-checkbox v-model=addRoleMsg.addRole label="addRole" size="large" />   </el-form-item>   
      <el-form-item style="margin-left: 15px;"> <el-checkbox v-model=addRoleMsg.GetRoles label="GetRoles" size="large" /></el-form-item>
      <el-form-item style="margin-left: 15px;"><el-checkbox v-model=addRoleMsg.removeRole label="removeRole" size="large" /></el-form-item>
      <el-form-item style="margin-left: 15px;"><el-checkbox v-model=addRoleMsg.grant label="grant" size="large" /></el-form-item>
      <el-form-item style="margin-left: 15px;"> <el-checkbox v-model=addRoleMsg.addUser label="AddUser" size="large" /></el-form-item>
      <el-form-item style="margin-left: 15px;"> <el-checkbox v-model=addRoleMsg.GetAllUsers label="GetAllUsers" size="large" /></el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="AddRoleSubmit()">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>


</template>

<script >

import axios  from 'axios';
import router from '@/routers';
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
export default { 

data(){
  return{
    currentData:[],
    dialogFormVisible : ref(false),
    formLabelWidth :'140px',
    pageinex:1,
    pagenum:0,
    pagesiz:10,
    addRoleMsg:{
      RoleName:"",
      addRole:ref(true),
      GetRoles:ref(true),
      removeRole:ref(true),
      grant:ref(true),
      addUser:ref(true),
      removeUser:ref(true),
      GetAllUsers:ref(true),
    }
   
     }
},
 
methods:{
logout(){
  console.log("lalla");
    if(confirm("确定退出登录？")){
        axios.get('/api/auth/logout',{
            headers: {
                '_accessToken_': localStorage.getItem("accessToken")
            }
                
        } 
  ).then((result) => {
            if(result.data.success){
                localStorage.removeItem("accessToken");
                this.$router.replace('/Login');
                return;
            }
            else{
             alert(result.data.msg);
             return;
            }
      
              
          });

}
},
// AddRoleSubmit(){
//   console.log("lalla");
//     var Resouces="";
//     var flag=new Boolean(true);
//     if(this.addRoleMsg.addRole){
//       if(!flag)Resouces+=",";
//       Resouces+="addRole";
//       flag=ref(false);
//     }
//     if(this.addRoleMsg.GetRoles){
//       if(!flag)Resouces+=",";
//       Resouces+="GetRoles";
//       flag=ref(false);
//     }
//     if(this.addRoleMsg.removeRole){
//       if(!flag)Resouces+=",";
//       Resouces+="reomveRole";
//       flag=ref(false);
//     }
//     if(this.addRoleMsg.grant){
//       if(!flag)Resouces+=",";
//       Resouces+="grant";
//       flag=ref(false);
//     }
//     if(this.addRoleMsg.addUser){
//       if(!flag)Resouces+=",";
//       Resouces+="addUser";
//       flag=ref(false);
//     }
//     if(this.addRoleMsg.removeUser){
//       if(!flag)Resouces+=",";
//       Resouces+="removeUser";
//       flag=ref(false);
//     }
//     if(this.addRoleMsg.GetAllUsers){
//       if(!flag)Resouces+=",";
//       Resouces+="GetAllUsers";
//       flag=ref(false);
//     }
//     console.log("lall");
//     console.log(Resouces);
    
// },
getdata(){
  axios.get("/api/authorize/getRoles",{
            params:{
                Page:this.pageindex,
                pageSize:this.pagesize

            },
            headers:{
              '_accessToken_': localStorage.getItem("accessToken")
            }

  }).then((result) => {
    if(result.data.success){
                this.currentData=result.data.data;
                this.pagenum=result.data.pageNum;
                return;
            }
            else{
             alert(result.data.msg);
             return;
            }
        
          });

  
},


AddRoleSubmit(){

  var Resources="";

  if(this.addRoleMsg.addRole){
    Resources=Resources+"addRole"
  }
  if(this.addRoleMsg.GetRoles){
    if(Resources==""){
      Resources=Resources+"getRoles";
    }
    else{
      Resources=Resources+",";
      Resources=Resources+"getRoles";
    }
  }
  if(this.addRoleMsg.removeRole){
    if(Resources==""){
      Resources=Resources+"removeRole";
    }
    else{
      Resources=Resources+",";
      Resources=Resources+"removeRole";
    }
  }
    if(this.addRoleMsg.grant){
    if(Resources==""){
      Resources=Resources+"grant";
    }
    else{
      Resources=Resources+",";
      Resources=Resources+"grant";
    }
  }
  if(this.addRoleMsg.addUser){
    if(Resources==""){
      Resources=Resources+"addUser";
    }
    else{
      Resources=Resources+",";
      Resources=Resources+"addUser";
    }
  }
  if(this.addRoleMsg.removeUser){
    if(Resources==""){
      Resources=Resources+"removeUser";
    }
    else{
      Resources=Resources+",";
      Resources=Resources+"removeUser";
    }
  }
  if(this.addRoleMsg.GetAllUsers){
    if(Resources==""){
      Resources=Resources+"getAllUsers";
    }
    else{
      Resources=Resources+",";
      Resources=Resources+"getAllUsers";
    }
  }
  axios.post('/api/authorize/addRole',{
      name:this.addRoleMsg.RoleName,
      Resources:Resources
    },
    {headers: {
      '_accessToken_': localStorage.getItem("accessToken"),
    }
  })
  .then(response => {
    if(response.data.success){
      ElMessage(response.data.msg);
      this.getdata();
    }
    else{
      ElMessage.error(response.data.msg);
    }
        
    }, )

},



handleCurrentChange(val) {
     console.log(`当前页: ${val}`);
      this.pageindex =val;
      this.getdata();
    },
 handleDelete (index,row) {
  console.log(index);
  console.log(this.currentData[index].id);
    if(confirm("确定删除用户？")){
        axios.delete('/api/authorize/removeRole',{
            params:{
                id:row.id,
            },
            headers: {
                '_accessToken_': localStorage.getItem("accessToken"),
            }
                
        } 
  ).then((result) => {
            if(result.data.success){
                alert("您已成功删除"+this.currentData[index].name+"角色");
                this.getdata();
            }
            else{
                alert(result.data.msg);
            }
          });

}}


},
async created(){
 this.getdata();

}
}

</script>

<style lang="less">
@import "@/assets/word-like.less";
@import "@/assets/paper.less";
@import "@/assets/CSS/Nav.css";
@import "@/assets/CSS/Management.css";
@import "@/assets/CSS/Role.css";


</style>